<template>
	<view>
		<view class="cu-chat">
			<view :class=" user_id==item.user_id?'self cu-item':'cu-item'" v-for="(item,index) in lists" :key="index">
				<image class="cu-avatar round lg " :src='item.icon' v-if="user_id!=item.user_id"></image>
				<view class="main">
					<view :class="user_id==item.user_id?'content bg-blue shadow':'content shadow'">
						<text>{{item.content}}</text>
					</view>
				</view>
			  
				<image class="cu-avatar round lg " :src='item.icon' v-if="user_id==item.user_id"></image>
			  
				<view class="date">{{item.time}}</view>
			</view>
<!-- 			<view class="cu-info round">对方撤回一条消息!</view> -->

<!-- 			<view class="cu-info">
				<text class="cuIcon-roundclosefill text-red "></text> 对方拒绝了你的消息
			</view>
			<view class="cu-info">
				对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
				<text class="text-blue">发送好友验证</text>
			</view> -->
<!-- 			<view class="cu-item self">
				<view class="main">
					<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix"></image>
				</view>
				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date"> 13:23</view>
			</view> -->
<!-- 			<view class="cu-item self">
				<view class="main">
					<view class="action text-bold text-grey">
						3"
					</view>
					<view class="content shadow">
						<text class="cuIcon-sound text-xxl padding-right-xl"> </text>
					</view>
				</view>
				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date">13:23</view>
			</view> -->
<!-- 			<view class="cu-item self">
				<view class="main">
					<view class="action">
						<text class="cuIcon-locationfill text-orange text-xxl"></text>
					</view>
					<view class="content shadow">
						喵星球，喵喵市
					</view>
				</view>
				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
				<view class="date">13:23</view>
			</view> -->
<!-- 			<view class="cu-item">
				<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
				<view class="main">
					<view class="content shadow">
						@#$^&**
					</view>
					<view class="action text-grey">
						<text class="cuIcon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
					</view>
				</view>
				<view class="date">13:23</view>
			</view> -->
		</view>

		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
<!-- 			<view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view> -->
			<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
			 @focus="InputFocus" @blur="InputBlur" v-model="msg"></input>
<!-- 			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view> -->
			<button class="cu-btn bg-green shadow" @tap="sendMsg">发送</button>
		</view>

	</view>
</template>

<script>
	import getDate from "../../component/getNowFormatDate.js"
	import store from '../../../globalStore/store.json'
	export default {
		data() {
			return {
				InputBottom: 0,
				lists:[],
				msg:"",
				user_id:"",
				friend_id:"",
				friend_name:"",
				friend_icon:""
			};
		},
		onLoad(options) {
			console.log(options)
			this.user_id=store.user.user_id;
			this.friend_id=options.friend_id;
			this.friend_name=options.friend_name;
			this.friend_icon=store.chat_datas.current_frend_icon;
			console.log(this.user_id,this.friend_id);
			uni.setNavigationBarTitle({
				title:this.friend_name
			})			
		},
		onShow() {
			var that=this;
			this.$goEasy.subscribe({
			    channel: this.friend_id, //替换为您自己的channel
			    onMessage: function (message) {
					let msg={
						
						icon:that.friend_icon,
						content:message.content,
						time:getDate(),
						user_id:that.friend_id
					};

					that.lists.push(msg);
			        //console.log("Channel:" + message.channel + " content:" + message.content);
			    }
			});
		},
		methods: {
			sendMsg(){
				
				let content={
						icon:store.user.icon,
						content:this.msg,
						time:getDate(),
						user_id:this.user_id
				};
				this.lists.push(content);
				this.$goEasy.publish({
				    channel: this.user_id, //替换为您自己的channel
				    message: this.msg //替换为您想要发送的消息内容
				});
				this.msg="";
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			}
		}
	}
</script>

<style scoped>
	page{
	  padding-bottom: 100upx;
	}
	.icon{
		width: 45px;
		height: 45px;
		border-radius: 50px 50px;
	}
</style>
